<template>
  <div id="foodList">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column fixed prop="name" label="食品名称" width="420"></el-table-column>
      <el-table-column prop="description" label="食品介绍" width="420"></el-table-column>
      <el-table-column prop="rating" label="评分" width="140"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.$index, scope.row)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pageNext">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import api from '@/api/center'

  export default {
    data() {
      return {
        currentPage: 1,//当前页
        total: 0,//总数量
        tableData: [{
          name: '',
          description: '',
          rating: ''
        }]
      }
    },
    mounted: function () {
      let params = {
        limit: 10
      };
      api.queryFoodsLists(params).then(res => {
        this.tableData = res;
      });
      api.queryFoodsCount().then(res => {
        if (res.status === 1) {
          this.total = res.count;
        }
      });
    },
    methods: {
      handleClick(index, row) {
        try {
          let params = {
            food_id: row.item_id
          };
          api.deleteFood(params).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '删除食品成功'
              });
              this.tableData.splice(index, 1);
            } else {
              this.$message.error(res.message);
            }
          });
        } catch (err) {
          this.$message({
            type: 'error',
            message: err.message
          });
          console.log('删除食品失败')
        }
      },
      handleCurrentChange(val) {
        let params = {
          limit: 10,
          offset: this.currentPage * 10
        };
        api.queryFoodsLists(params).then(res => {
          this.tableData = res;
        });
      },
    },
  }
</script>
<style lang="stylus" scoped>
  .pageNext {
    position relative
    top 10px
    width 100%
  }
</style>
